@import "../../../styles/base";

@function tovw($size) {
  @return #{$size / 3.6}vw;
}

.GiftBox {
  background: #fff;
  text-align: center;

  .title {
    text-align: left;
  }

  ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 tovw(6.5);

    li {
      flex: 0 0 25%;
      padding: tovw(2.5);

      .wrap {
        height: tovw(68);
        border: 1px solid rgba(221, 221, 221, 1);
        border-radius: tovw(6.8);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #FFFFFF;
        position: relative;

        .desc {
          font-size: tovw(11.91);
          color: #1C1D1F;
          letter-spacing: 0;
          font-weight: 500;
        }

        .right {
          width: tovw(16);
          height: tovw(14);
          background: url("./../images/right.png") center / contain no-repeat;
          display: none;
        }

        .num {
          position: absolute;
          top: tovw(3);
          left: tovw(3);
          font-size: tovw(11.91);
          color: #BBBBBB;
          letter-spacing: 0;
          font-weight: 400;
        }


        .icon {
          width: 75%;
          height: 60%;
          background: url("./../images/gift.png") center / contain no-repeat;

          &-gift {
            background-image: url("./../images/gift.png");
          }

          &-box-red {
            background-image: url("./../images/box-red.png");
          }

          &-box-yellow {
            background-image: url("./../images/box-yellow.png");
          }
        }

        &.active {
          border-color: transparent;
          background-image: linear-gradient(-45deg, #572DDD 0%, #992DFF 100%);

          .num {
            color: #fff;
          }

          .desc {
            color: #fff;
          }

          .icon::before {
            content: "";
            display: block;
            width: 110%;
            height: 18vw;
            position: absolute;
            top: -4vw;
            left: 0;
            bottom: 0;
            right: 0;
            background: url('./../images/light-icon.png') center center / 100% no-repeat;
          }
        }

        &.done {
          background: #E8E3F9;

          .num {
            color: #BBBBBB;
          }

          .icon {
            &-gift {
              background-image: url("./../images/gift-disabled.png");
            }

            &-box-red {
              background-image: url("./../images/box-red-disabled.png");
            }

            &-box-yellow {
              background-image: url("./../images/box-yellow-disabled.png");
            }
          }

          .desc {
            display: none;
          }

          .right {
            display: block;
          }
        }
      }

      &:last-of-type {
        flex: 1 0;
      }
    }
  }

  .sign-btn {
    font-size: tovw(21);
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
    width: tovw(250);
    height: tovw(45);
    margin: tovw(18) auto;
    background: url("./../images/sign-btn.png") center / 100% no-repeat;

    &[disabled] {
      background-image: url("./../images/sign-btn-disabled.png");
    }
  }
}
